<template>
  <el-dialog
    :title="title"
    class="dialog-wrap"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    @closed="resetForm()"
    width="700px"
  >
    <div class="dialog-cont">
      <el-form
        :model="form"
        status-icon
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="上级菜单" class="newMenu">
          <tree-select
            :data="newMenu"
            :checkedKeys="defaultCheckedKeys"
            @popoverHide="popoverHide"
            @clear="clear"
            v-if="flag"
            style="width: 100%"
          ></tree-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input type="input" v-model="form.name"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否业务菜单" label-width="120px">
              <el-radio-group v-model="form.isBusi">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否开发菜单" label-width="120px">
              <el-radio-group v-model="form.isDev">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否公共菜单" label-width="120px">
              <el-radio-group v-model="form.isPublic">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否激活">
              <el-radio-group v-model="form.del">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否是按钮">
              <el-radio-group v-model="form.button">
                <el-radio label="3">是</el-radio>
                <el-radio label="4">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="菜单排序" prop="orderSort" >
          <el-input type="number" v-model="form.orderSort"></el-input>
        </el-form-item>
        <el-form-item label="菜单地址" prop="url">
          <el-input
            type="input"
            v-model="form.url"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input
            type="input"
            v-model="form.icon"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="content">
          <el-input
            type="input"
            v-model="form.content"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <span class="dialog-footer">
        
        <el-button  type="custom" v-preventReClick  @click="submitForm('form')">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
import { tbMenuAdd, tbMenuUpdate }  from "@/api/admin/system/menu";
import TreeSelect from "@/components/treeSelect";
import Bus from "@/utils/bus.js";
import webMenu from "@/mixins/webMenu.js";
export default {
  components: { TreeSelect },
    mixins: [webMenu],
  data() {
    return {
      title: "菜单管理-新增",
      dialogVisible: false,
      checkedData: {},
      addOrEdit: 1,
      orderSortShow: false,
      popoverHideClick: false,
      form: {
        del: "1",
        isBusi: "1",
        isDev: "1",
        isPublic: "1",
        name: "",
        content: "",
        level: "1",
        url: "",
        pid: "0",
        style: "",
        orderSort: "1",
        button: "4",
        icon:''
      },
      rules: {
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        pname: [
          { required: true, message: "请选择上级菜单", trigger: "change" },
        ],
      },
      //树形选框配置
      flag: false,
      defaultCheckedKeys: [],
      newMenu: [],
    };
  },
  props: ["dataArr"],
  mounted() {
    this.list();
    // Bus.$on("showAddDialog_Menu", (v,type) => {
    //   this.checkedData = v;
    //   if (type) {
    //     this.handleAddOrEdit(2);
    //   } else {
    //     this.handleAddOrEdit(1);
    //   }
    // });
  },
  beforeDestroy() {
    // Bus.$off("showAddDialog_Menu");
  },
  methods: {
    list() {
 
      this.newMenu  =this.dataArr;

    //   this.newMenu = copyMenu.map((v) => {
    //     if (v.childList.length != 0) {
    //       v.childList.map((m) => {
    //         m.childList = [];
    //       });
    //     }
    //     return v;
    //   });
    },
    showAddDialog_Menu(v, type) {
      this.checkedData = v;
  
      if (type) {
        this.handleAddOrEdit(2);
      } else {
        this.handleAddOrEdit(1);
      }
    },
    handleAddOrEdit(type) {
      
      if (type == 2) {
        this.title = "编辑";
        this.orderSortShow = true;
      
        this.form.id = this.checkedData.id||0;
       
        if (this.checkedData.level == "3") {
          this.form.button = "3";
        } else {
          this.form.button = "4";
        }
        for (let i in this.checkedData) {
          if (this.form.hasOwnProperty(i)) {
            this.form[i] = this.checkedData[i] || "";
          }
        }
         if(this.checkedData ){
            this.form.pid=this.checkedData.pid;
            if( this.checkedData.pid!=='0'){
             
                 this.defaultCheckedKeys[0] = this.form.pid;
            }
            
         }

      
      } else {
        this.title = "新增";
        this.orderSortShow = false;
        if (this.checkedData != undefined) {
          this.defaultCheckedKeys[0] = this.checkedData.id || 0;
        }
        delete this.form.id;

        if(this.checkedData ){
            this.form.pid=this.checkedData.id;
        }
        
      }
      
        this.addOrEdit = type;
        this.dialogVisible = true;
        this.flag = true;
        this.form.button = this.form.button == "" ? "4" : this.form.button;
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.addOrEdit == 1 ? this.add() : this.edit();
        }
      });
    },
    add() {
      var data = JSON.parse(JSON.stringify(this.form));
      if (!this.popoverHideClick) {
        if (this.checkedData != undefined) {
          // data.pid = this.checkedData.pid;
        } else if (data.pid == null) {
           
          data.pid = "0";
        }
        if (data.button == "3") {
          // data.pid = this.form.pid||0;
          data.level = "3";
        }
        else{
          data.level = "2";
        }
      } else {
        if (data.button == "3") {
          data.level = "3";
        }
        else{
          data.level = "2";
        }
      }
      
         
     if(data.pid==null){
         data.pid="0";
     }

      tbMenuAdd(data).then((res) => {
        if (res.data.code == 0) {
          this.dialogVisible = false;
          Bus.$emit("refreshList_Menu");
          this.$message({
            message: "操作成功",
            type: "success",
          });
          // location.reload();
        }
      });
    },
    //编辑
    edit() {
      var data = JSON.parse(JSON.stringify(this.form));
      if (!this.popoverHideClick) {
        if (this.checkedData != undefined) {
          data.pid = this.checkedData.pid;
        } else if (data.pid == null) {
          data.pid = "0";
        }
        if (data.button == "3") {
          data.level = "3";
        }
        else{
          data.level = "2";
        }
      } else {
        if (data.button == "3") {
          data.level = "3";
        }
        else{
          data.level = "2";
        }
      }
      tbMenuUpdate(data).then((res) => {
        if (res.data.code == 0) {
          this.dialogVisible = false;
          Bus.$emit("refreshList_Menu");
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    popoverHide(checkedIds, checkedData) {
      //新增
      this.popoverHideClick = true;
      this.form.pid = checkedIds;
      this.form.level = parseInt(checkedData.level) + 1;
    },
    clear() {
      this.form.pid = "1";
      this.form.level = "1";
    },
    //重置表单
    resetForm() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.form.del = "1";
      this.form.isBusi = "1";
      this.form.isDev = "1";
      this.form.isPublic = "1";
      this.form.level = "1";
      this.form.pid = "0";
      this.defaultCheckedKeys = [];
      this.flag = false;
    },
  },
};
</script>
<style  lang="scss">
/* #menu .newMenu .el-form-item__content .tree-select{
  width: 460px !important;
} */
</style>